<template>
  <div>
    <!-- 吸顶按钮 -->
    <Sticky :class-name="`sub-navbar ${className}`">
      <el-button
        v-if="!isEdit"
        @click="switchNotice"
      >显示公告</el-button>
      <el-button
        :loading="loading"
        type="success"
        @click="handleClick"
      >{{ isEdit?"编辑电子书":"新增电子书" }}</el-button>
    </Sticky>

    <el-form ref="form" class="info" :model="book" :rules="rules">
      <!-- 公告 -->
      <el-row v-if="!isEdit">
        <el-col :span="24">
          <transition name="notice">
            <aside v-if="showNotice">
              上传电子书分为两步:上传电子书和新增电子书。首先需要上传epub电子书文件,服务器会对epub文件进行解析,解析成功后会将电子书的各字段填入表单,之后我们只需要手动点击新增电子书即可完成电子书的保存
            </aside>
          </transition>
        </el-col>
      </el-row>
      <!-- 上传区域 -->
      <el-row v-if="!isEdit">
        <el-col :span="24">
          <el-upload
            name="book"
            class="upload"
            accept="application/epub+zip,application/pdf"
            :drag="true"
            action="/dev-api/vue-element-admin/book/upload"
            :multiple="true"
            :disabled="isEdit"
            :limit="1"
            :before-upload="beforeBookUpload"
            :on-exceed="onExceed"
            :on-success="onSuccess"
            :on-remove="onRemove"
            :on-progress="onProgress"
            :on-error="onError"
            :file-list="fileList"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              {{ isEdit?"传不了":"将文件拖到此处，或点击上传" }}
            </div>
            <div slot="tip" class="el-upload__tip">
              只能上传EPUB文件,且不超过5M
            </div>
          </el-upload>
        </el-col>
      </el-row>
      <!-- 表单区域 -->
      <el-row>
        <el-col :span="24">
          <el-form-item prop="title" label="书名">
            <MDinput :value="book.title" @input="book.title = $event" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="creator" label="作者" :label-width="labelWidth">
            <el-input v-model="book.creator" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="publisher" label="出版社" :label-width="labelWidth">
            <el-input v-model="book.publisher" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="language" label="语言" :label-width="labelWidth">
            <el-input v-model="book.language" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="rootUrl" label="根文件" :label-width="labelWidth">
            <el-input v-model="book.rootUrl" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="url" label="文件路径" :label-width="labelWidth">
            <el-input v-model="book.url" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="unzipURL" label="解压路径" :label-width="labelWidth">
            <el-input v-model="book.unzipURL" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="coverURL" label="封面路径" :label-width="labelWidth">
            <el-input v-model="book.coverURL" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="name" label="文件名称" :label-width="labelWidth">
            <el-input v-model="book.name" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 封面 目录 -->
      <el-row v-if="!isEdit" style="margin-bottom: 30px;">
        <el-col :span="24" :style="{marginLeft: labelWidth}">
          <span :style="{display:'block'}">封面</span>
          <img :src="book.coverURL" width="180px" alt="">
        </el-col>
      </el-row>
      <el-row v-if="!isEdit">
        <el-col :span="24">
          <span :style="{marginLeft: labelWidth}">目录</span>
          <el-tree
            class="tree"
            :data="treeData"
            :props="defaultProps"
          />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import MDinput from '@/components/MDinput'
import mixin from './mixin'
import { addBook, findBookById, updateBook } from '@/api/book'
export default {
  name: 'CreateOrEdit',
  components: { Sticky, MDinput },
  mixins: [mixin],
  props: {
    // 代表是实现新增功能 还是 编辑功能
    isEdit: Boolean
  },
  data() {
    return {
      // 新增或编辑按钮的加载效果是否出现
      loading: false,
      fileList: [],
      book: {
        coverURL: '',
        creator: '',
        flow: [],
        language: '',
        name: '',
        publisher: '',
        rootUrl: '',
        title: '',
        unzipURL: '',
        url: ''
      }
    }
  },
  async created() {
    // this.$bus.$on("sendId",(id)=>{
    //   this.editId = id;
    // })
    const { code, data: book } = await findBookById(this.$route.params.id)
    if (code === 20000) {
      this.book = book
    }
  },
  methods: {
    // 新增电子书
    handleClick() {
      // 通过表单验证才可以去实现相应的逻辑
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          try {
            this.loading = true
            this.className = 'edit'
            if (this.isEdit) {
              await updateBook(this.book)
            } else {
              await addBook(this.book)
            }
            // 请求成功 清除上传数据 消除loading和颜色 跳转到列表页
            this.book = {}
            this.fileList = []
            this.loading = false
            this.className = 'draft'
            this.$router.push('/book/list')
          } catch (error) {
            // 请求失败
            // 拦截器已经帮我们提示了失败信息
            this.loading = false
          }
        } else {
          this.$message.error('表单数据验证失败')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .notice-enter-active, .notice-leave-active {
    transition: opacity 1s;
  }
  .notice-enter, .notice-leave-to  {
    opacity: 0;
  }
  .tree{
    padding-left:100px;
    padding-top: 15px;
  }
  .info{
    padding: 40px 50px;
  }
  .upload{
    width: 100%;
    margin-top:50px;
    ::v-deep .el-upload{
      width: 100%;
      .el-upload-dragger{
        width: 100%;
      }
    }
    .el-upload__tip{
      font-size: 20px !important;
      color: red;
      text-align: right;
    }
  }
</style>
